<template>
    <div class="content">
        <div class="score-detail">
            <div class="statistics">
                <div class="statistics--item">
                    <div class="statistics--label">考试次数：</div>
                    <div class="statistics--value">{{data.examNum}}</div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">平均分：</div>
                    <div class="statistics--value">{{data.examAvgScore}}</div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">最高分：</div>
                    <div class="statistics--value">{{data.examMaxScore}}</div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">最低分：</div>
                    <div class="statistics--value">{{data.examMinScore}}</div>
                </div>
            </div>
            <div class="score-chart">
                <ScoreChart title="考试成绩" :data="scoreData" />
            </div>
        </div>
        <div class="score-detail">
            <div class="statistics">
                <div class="statistics--item">
                    <div class="statistics--label">实训次数：</div>
                    <div class="statistics--value">{{data.trainingNum}}</div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">平均分：</div>
                    <div class="statistics--value">
                        {{data.trainingAvgScore}}
                    </div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">最高分：</div>
                    <div class="statistics--value">{{data.trainingMaxScore}}</div>
                </div>
                <div class="statistics--item">
                    <div class="statistics--label">最低分：</div>
                    <div class="statistics--value">{{data.trainingMinScore}}</div>
                </div>
            </div>
            <div class="score-chart">
                <ScoreChart title="实训成绩" :data="practiceData" />
            </div>
        </div>
        <div class="footer-submit">
            <Button type="primary">返回</Button>
        </div>
    </div>
</template>
<script>
import ScoreChart from './components/score-chart'
import { getDetail } from '@/api/score'
export default {
    components: {
        ScoreChart
    },
    data () {
        return {
            data: {},
            scoreData: [
                { label: '考试一', value: 67 },
                { label: '考试二', value: 87 },
                { label: '考试三', value: 77 },
                { label: '考试四', value: 97 },
                { label: '考试五', value: 100 }
            ],
            practiceData: [
                { label: '实训一', value: 67 },
                { label: '实训二', value: 87 },
                { label: '实训三', value: 77 },
                { label: '实训四', value: 97 },
                { label: '实训五', value: 100 }
            ]
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            let id = this.$route.query.id
            let params = {
                stuId: id

            }
            getDetail(params).then(res => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.data = res.data.data
                this.scoreData = res.data.data.examList
                this.practiceData = res.data.data.trainingList
            })
        }

    }
}
</script>
<style lang="less" scoped>
.score-detail {
    position: relative;
    & + & {
        margin-top: 20px;
    }
    .statistics {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        &--item {
            font-size: 16px;
            margin-bottom: 10px;
        }
        &--label {
            width: 120px;
            text-align: right;
            float: left;
        }
        &--value {
            margin-left: 130px;
            width: 100px;
        }
    }
}

.score-chart {
    margin: 0 50px 0 230px;
    height: 400px;
}
</style>
